<template>
  <view class="order-layout">
    <my-header title="确认订单"></my-header>
    <my-content class="content">
      <view style="visibility: hidden">1</view>
      <view class="address" @click="header(`/pages/address/index?resource=order`)">
        <view class="address_left">
          <image mode="widthFix" src="https://www.dingxians.cn/images/common/location.png" class="address_icon"></image>
          <view class="address_info" v-if="addressData.id">
            <view class="address_user">
              <view class="username">{{ addressData.username }}</view>
              <view class="mobile">{{ addressData.mobile }}</view>
            </view>
            <view class="address_detail">
              {{ addressData.province }}{{ addressData.city }}{{ addressData.area }}{{ addressData.detail }}
            </view>
          </view>
          <view class="address_info none" v-else>请填写地址</view>
        </view>
        <image class="address_right" src="https://www.dingxians.cn/images/user/right.png"></image>
      </view>
      <view class="goods_box">
        <view class="goods_box_info">
          <view class="goods_info" v-for="item in orderData" :key="item.id">
            <view class="goods_content">
              <view
                class="goods-image-bg"
                :style="[useLevelBg('img', item.level_id)]"
              >
                <image
                  mode="widthFix"
                  class="goods_image"
                  :src="item.box_prize_image"
                ></image>
                <view
                  class="level-icon"
                  :style="[useLevelBg('icon', item.level_id)]"
                >
                  {{ item.level_name }}
                </view>
              </view>
              <view class="goods_item">
                <view class="goods_name">{{ item.box_prize_name }}</view>
                <view class="goods_price_num">
                  <view class="goods_price">
                    <view>￥</view>
                    <view class="goods_price_int">{{ item.price }}</view>
                  </view>
                  <view class="goods_num">
                    x {{ item.num }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="order_item">
          <view class="order_label">订单类型</view>
          <view class="order_text order_type">提货订单</view>
        </view>
        <view class="order_item">
          <view class="order_label">运费</view>
          <view class="order_text order_freght">
            <view>￥</view>
            <view class="order_text_int">{{ freight_amount }}</view>
          </view>
        </view>
        <view class="order_item">
          <view class="order_label">包邮券</view>
          <view class="order_text order_freght" v-if="coupon_id">
            <view>-￥</view>
            <view class="order_text_int">{{ freight_amount }}</view>
          </view>
          <view class="order_text order_freght" v-else>无</view>
        </view>
        <view class="order_item remark">
          <view class="order_label">备注信息</view>
          <textarea class="order_remark" placeholder="选填备注信息" />
        </view>
      </view>
      <view class="pay_box">
        <view @click="changeType(item.id)" class="pay_item" v-for="item in pay_type_arr" :key="item.id">
          <view class="pay_left">
            <image mode="widthFix" class="pay_icon" :src="item.pay_icon"></image>
            <view>{{ item.name }}</view>
          </view>
          <image class="pay_selected" v-if="pay_type == item.id" src="https://www.dingxians.cn/images/common/selected.png"></image>
          <image class="pay_selected" v-else src="https://www.dingxians.cn/images/common/unselected.png"></image>
        </view>
      </view>
      <view class="exchange">
        <rich-text :nodes="shipping_info"></rich-text>
      </view>
      <view style="visibility: hidden; margin-top: 150rpx">1</view>
      <view class="bottom">
        <view class="bottom_text">
          <view class="bottom_text_num">共{{ num }}件</view>
          <view style="margin-left: 20rpx;">合计：</view>
          <view class="bottom_text_amount">
            <!--            <view>￥</view>-->
            <view class="amount_int">{{ pay_amount }}</view>
          </view>
        </view>
        <view class="exchange_btn" @click="submit()" v-if="is_shipped && addressData && submitStatus">提交订单</view>
        <view class="exchange_btn none" v-else>提交订单</view>
      </view>
    </my-content>

  </view>
</template>

<script>
import api from '../../api/index.js'
import box from '@/mixins/box'

export default {
  mixins: [box],
  data() {
    return {
      orderData: [],
      ids: [],
      addressData: { id: '' },
      shipping_info: '',
      freight_amount: 0,
      pay_amount: 0,
      is_shipped: false,
      submitStatus: false,
      pay_type: 1,
      pay_type_arr: [
        { id: 1, name: '微信', pay_icon: 'https://www.dingxians.cn/images/box/wx_pay.png' },
        { id: 2, name: '支付宝', pay_icon: 'https://www.dingxians.cn/images/box/ali_pay.png' },
      ],
      coupon_id: 0,
      isWelfare: false,
    }
  },
  onLoad(option) {
    this.ids = option.ids
    this.isWelfare = option.welfare === 'true'
  },
  onShow() {
    this.getGoods()
  },
  computed: {
    // 选中的商品
    num() {
      let total_num = 0
      this.orderData.forEach((item) => {
        total_num += item.num
      })
      return total_num
    },
  },
  methods: {
    splitNum(num) {
      return num.split('.')
    },
    changeType(pay_type) {
      this.pay_type = pay_type
    },
    getGoods() {
      uni.showLoading({
        title: '数据加载中',
      })
      this.submitStatus = false
      let promise
      if (this.isWelfare) {
        promise = api.welfareHouses.take({ ids: this.ids, user_address_id: this.addressData.id })
      } else {
        promise = api.blindBoxOrderPrizes.order({ ids: this.ids, user_address_id: this.addressData.id })
      }
      promise
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            this.orderData = res.data.user_prizes
            if (res.data.user_address) {
              this.addressData = res.data.user_address
            }
            this.shipping_info = res.data.shipping_info
            this.freight_amount = res.data.freight_amount
            this.pay_amount = res.data.pay_amount
            this.coupon_id = res.data.coupon_id
            console.log(res.data)
            this.is_shipped = res.data.is_shipped
            this.submitStatus = true
            if (!this.is_shipped) {
              this.show('所选地区不支持配送')
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    submit() {
      this.submitStatus = false
      uni.showLoading({
        title: '订单提交中',
      })
      const params = {
        coupon_id: this.coupon_id,
        prize_id: JSON.parse(this.ids),
        user_address_id: this.addressData.id,
        pay_type: this.pay_type,
        // tag: 2福利屋 1盲盒
        tag: this.isWelfare ? 2 : 1,
      }
      let promise
      if (this.isWelfare) {
        promise = api.welfareHouses.store(params)
      } else {
        promise = api.orders.store(params)
      }
      promise
        .then((res) => {
          uni.hideLoading()
          if (res.code === 200) {
            if (res.data.order_status == 2) {
              this.header('/pages/order/index')
              return
            }
            // 微信支付
            if (this.pay_type == 1) {
              let pay_data = res.data.data
              uni.requestPayment({
                provider: 'wxpay',
                orderInfo: {
                  appid: pay_data.appid, // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
                  noncestr: pay_data.noncestr, // 随机字符串
                  package: pay_data.package, // 固定值
                  partnerid: pay_data.partnerid, // 微信支付商户号
                  prepayid: pay_data.prepayid, // 统一下单订单号
                  timestamp: pay_data.timestamp, // 时间戳（单位：秒）
                  sign: pay_data.sign, // 签名，这里用的 MD5/RSA 签名
                },
                success: (res) => {
                  this.header(`/pages/order/index`)
                },
                fail: (error) => {
                  this.header(`/pages/order/index`)
                },
              })
            } else if (this.pay_type == 2) {
              let pay_data = res.data.data
              uni.requestPayment({
                provider: 'alipay',
                orderInfo: pay_data,
                success: (res) => {
                  this.header(`/pages/order/index`)
                },
                fail: (error) => {
                  this.header(`/pages/order/index`)
                },
              })
            }
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss">
.order-layout {
  height: 100%;
  min-height: 100vh;
  background-color: #141414;
}

.content {

  .address {
    display: flex;
    align-items: center;
    background-color: #1f1f1f;
    margin: 0 30rpx 30rpx 30rpx;
    padding: 30rpx 0;
    justify-content: space-between;
    border-radius: 10rpx;

    .address_left {
      display: flex;
      align-items: center;
      margin-left: 30rpx;

      .address_icon {
        width: 51rpx;
        height: 69rpx;
        margin-right: 40rpx;
      }

      .address_info {
        color: white;
        display: flex;
        flex-direction: column;
        height: 100rpx;
        font-size: 28rpx;

        &.none {
          align-items: center;
          flex-direction: row;
        }

        .address_user {
          display: flex;
          align-items: flex-end;
          font-weight: bold;

          .username {
            font-weight: bold;
            margin-right: 25rpx;
            font-size: 32rpx;
          }

          .mobile {
            font-size: 24rpx;
            align-self: flex-end;
          }
        }

        .address_detail {
          margin-top: 20rpx;
          font-size: 26rpx;
          color: #808080;
          word-break: normal;
        }
      }
    }

    .address_right {
      width: 40rpx;
      height: 40rpx;
      margin-right: 30rpx;
    }
  }

  .goods_box {
    display: flex;
    flex-direction: column;
    margin: 0 30rpx;
    background-color: #1f1f1f;
    border-radius: 5rpx;
    color: white;
    /*padding: 0 28rpx;*/

    .order_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 70rpx;
      font-size: 28rpx;
      padding: 0 30rpx;

      .order_label {
        /*margin-left: 30rpx;*/
        font-weight: bold;
        color: #808080;
      }

      .order_text {
        /* margin-right: 30rpx;*/
        display: flex;
        align-items: baseline;
      }

      &.remark {
        height: fit-content;
        margin-top: 16rpx;
        flex-direction: column;
        align-items: flex-start;
        /*height: 210rpx;*/
        font-size: 28rpx;
        justify-content: center;
        margin-bottom: 30rpx;
      }

      .order_remark {
        width: 100%;
        box-sizing: border-box;
        height: 140rpx;
        font-size: 28rpx;
        /*margin-left: 30rpx;*/
        margin-top: 16rpx;
        padding: 20rpx;
        color: #ccc;
        background: #292929;
      }
    }

    .goods_box_info {
      display: flex;
      flex-direction: column;
      max-height: 500rpx;
      overflow: scroll;

      .goods_info {
        display: flex;
        // padding: 30rpx;
        // background-color: #fff;
        // border-radius: 10rpx;
        // margin-bottom: 20rpx;
        flex-direction: column;

        .goods_level {
          color: #fff;
          font-size: 24rpx;
          padding: 10rpx 0;
          margin-top: 10rpx;
          border-top-right-radius: 20rpx;
          width: 100rpx;
          border-bottom-right-radius: 20rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .goods_content {
          // align-items: center;
          display: flex;
          // height: 200rpx;
          padding: 20rpx 10rpx;

          .goods-image-bg {
            position: relative;
            background-size: cover;
            background-clip: border-box;
            width: 200rpx;
            height: 200rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10rpx 20rpx 0 20rpx;
            /*margin-left: 20rpx;*/
            /* margin-right: 10rpx; */
          }

          .level-icon {
            width: 71rpx;
            height: 28rpx;
            line-height: 28rpx;
            position: absolute;
            background-size: 100% 100%;
            left: 10rpx;
            top: 10rpx;
            font-size: 17rpx;
            box-sizing: border-box;
            padding-left: 30rpx;
          }

          .goods_image {
            width: 170rpx;
            height: 170rpx;
          }

          /*.goods_image {
            width: 200rpx;
            height: 200rpx;
            margin-right: 20rpx;
          }*/

          .goods_item {
            /*width: 450rpx;*/
            flex: 1;
            padding-right: 20rpx;
            display: flex;
            justify-content: space-around;
            flex-direction: column;

            .goods_name {
              width: 100%;
              font-size: 30rpx;
              -webkit-line-clamp: 3;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .goods_price_num {
              display: flex;
              justify-content: space-between;
              align-items: baseline;

              .goods_price {
                color: white;
                display: flex;
                align-items: baseline;
                font-size: 28rpx;

                .goods_price_int {
                  // font-size: 40rpx;
                }
              }

              .goods_num {
                color: #999;
                font-size: 24rpx;
              }
            }
          }
        }
      }
    }
  }

  .exchange {
    padding: 24rpx 28rpx;
    font-size: 24rpx;
    color: #808080;
    background-color: #1f1f1f;
    width: 660rpx;
    margin: 30rpx auto;
    border-radius: 5rpx;
  }

  .pay_box {
    display: flex;
    flex-direction: column;
    /*width: 660rpx;*/
    margin: 30rpx 30rpx;
    padding: 10rpx 28rpx;
    background-color: #1f1f1f;
    border-radius: 10rpx;
    color: white;

    .pay_item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      font-size: 30rpx;

      .pay_left {
        display: flex;
        align-items: center;

        .pay_icon {
          width: 50rpx;
          height: 50rpx;
          margin-right: 20rpx;
        }
      }

      .pay_selected {
        width: 40rpx;
        height: 40rpx;
        /*margin-right: 30rpx;*/
      }
    }
  }

  .bottom {
    display: flex;
    /* justify-content: flex-end; */
    justify-content: space-between;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    width: 100%;
    height: 112rpx;
    background-color: #141414;
    align-items: center;
    color: white;
    box-sizing: border-box;
    padding: 0 28rpx;

    .bottom_text {
      display: flex;
      align-items: baseline;
      font-size: 24rpx;

      .light {
        color: #ded000;
      }

      .bottom_text_num {
        margin-right: 10rpx;
      }

      .bottom_text_amount {
        font-weight: bold;
        margin-right: 10rpx;
        display: flex;
        align-items: baseline;

        .amount_int {
          /* font-size: 40rpx; */
          font-size: 32rpx;
          font-weight: bold;
          color: #DED000;
        }
      }

      .bottom_txt {
        font-weight: bold;
      }
    }

    .exchange_btn {

      height: 84rpx;
      line-height: 84rpx;
      background-image: url('https://www.dingxians.cn/upload/user_static/common/btn-primary-small.png');
      background-size: 100% 100%;
      text-align: center;
      width: 228rpx;
      /* margin: 0 20rpx; */
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #fff;

      &.none {
        filter: grayscale(1);
      }
    }
  }
}
</style>